<template>
	<view class="locale">
		<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
			<text class="text">{{item.text}}</text>
			<text class="icon-check" v-if="item.code == applicationLocale"></text>
		</view>
		<view class="locale-btn">
			<button type="primary" @click="apply">{{$t('app.my.apply')}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applicationLocale: '',
			}
		},
		computed: {
			locales() {
				return [{
						text: this.$t('app.locale.en'),
						code: 'en'
					},
					{
						text: this.$t('app.locale.zh-hans'),
						code: 'zh-Hans'
					},
					{
						text: this.$t('app.locale.zh-hant'),
						code: 'zh-Hant'
					},
					{
						text: this.$t('app.locale.ja'),
						code: 'ja'
					}
				]
			}
		},
		onLoad() {
			this.applicationLocale = uni.getLocale();
		},
		methods: {
			onLocaleChange(e) {
				this.applicationLocale = e.code
			},
			apply() {
				let systemInfo = uni.getSystemInfoSync();
				let isAndroid = systemInfo.platform.toLowerCase() === 'android';
				
				if (isAndroid) {
					uni.showModal({
						content: this.$t('app.message.restartApp'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(this.applicationLocale);
								uni.reLaunch({
									url: '/pages/platform/my/index'
								})
							}
						}
					})
				} else {
					uni.setLocale(this.applicationLocale);
					this.$i18n.locale = this.applicationLocale;
					uni.reLaunch({
						url: '/pages/platform/my/index'
					})
				}
			}
		}
	}
</script>

<style>
	.locale {
		font-size: 16px;
		margin: 10px 0;
	}
	
	.locale-item {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
	}

	.locale-item .text {
		flex: 1;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #1E90E6;
		border-left: 0;
		border-top: 0;
		height: 20px;
		width: 10px;
		transform-origin: center;
		transition: all 0.3s;
		transform: rotate(45deg);
	}
	
	.locale-btn {
		margin: 30px 15px;
	}
	
	.locale-btn button {
		background-color: #1E90E6;
	}
</style>
